<template>
    <view>
        <!-- 不通过 -->

        <uni-popup type="center" ref="pinyin">
            <view class="pop-view">
                <view class="pop-title">{{ title }}</view>
                <view class="pop-desc">{{ reson }}</view>
                <view class="pop-content">
                    <textarea style="height: 150rpx; width: 100%" :placeholder="placeholder" v-model="remake"></textarea>
                </view>
                <view class="pop-btn">
                    <view class="pop-cancel" @click="close">取消</view>
                    <view class="pop-confirm" @click="submit">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    name: 'popup',
    props: {
        title: {
            type: String,
            default: ''
        },
        reson: {
            type: String,
            default: '原因'
        },
        placeholder: {
            type: String,
            default: '请输入不通过原因'
        },
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            remake: ''
        };
    },
    watch: {
        value(nv, ov) {
            if (nv) {
                this.open();
            } else {
                this.close();
            }
        }
    },
    methods: {
        open() {
            this.$refs.pinyin.open();
            this.$emit('input', true);
        },
        close() {
            this.$refs.pinyin.close();
            this.$emit('input', false);
        },
        submit() {
            this.$emit('submit', this.remake);
        }
    }
};
</script>

<style scoped lang="scss">
.pop-view {
    background: #fff;
    border-radius: 36rpx;
    padding: 30rpx;
    width: 84vw;
    .pop-title {
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
    }
    .pop-desc {
        color: #666;
        font-size: 26rpx;
        margin-top: 30rpx;
    }
    .pop-content {
        font-size: 26rpx;
        margin-top: 20rpx;
    }
    .pop-tip {
        font-size: 24rpx;
        color: #3377ff;
        padding: 10rpx 0;
    }
    .pop-btn {
        display: flex;
        margin-top: 30rpx;
        .pop-cancel {
            text-align: center;
            font-size: 30rpx;
            margin-right: 40rpx;
            flex: 1;
            padding: 24rpx 0;
            border-radius: 20rpx;
            overflow: hidden;
        }
        .pop-confirm {
            text-align: center;
            font-size: 30rpx;
            background: #3377ff;
            color: #fff;
            padding: 24rpx 0;
            border-radius: 20rpx;
            flex: 1;
            overflow: hidden;
        }
    }
}
</style>
